<template>
  <div class="container" id="subject-management">
    <table-filter>
      <el-select
          placeholder="请选择题库"
          clearable
          v-model="apiSetting.data.quebankid"
      >
        <el-option
            v-for="item in queBanks"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        ></el-option>
      </el-select>
      <el-input
          placeholder="请输入科目名称"
          clearable
          v-model="apiSetting.data.subname"
      ></el-input>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <el-row>
      <el-button plain type="primary" @click="showEaDialog = true"
      >添加科目
      </el-button
      >
    </el-row>
    <data-table
        ref="dtb"
        :api-setting="apiSetting"
        :sort-column="sortColumn"
        pagination
    >
      <el-table-column
          fixed
          label="排序"
          width="100"
          prop="sort"
          show-overflow-tooltip
      />
        <!--<template slot-scope="{ row }">
          <el-input
              size="small"
              placeholder="请输入排序"
              v-model="row.sort"
              @change="updateSort($event,row.subid)"
          >
          </el-input>
        </template>-->
<!--      </el-table-column>-->
      <el-table-column
          prop="subname"
          label="科目名称"
          show-overflow-tooltip
      />
      <el-table-column
          label="创建时间"
          width="210"
          prop="createtime"
          sortable
          show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.createtime | formatterDate }}
        </template>
      </el-table-column>

      <el-table-column label="是否可关联课件" width="150">
        <template slot-scope="{ row }">
          <el-switch
                  v-model="row.isCourse"
                  :active-value="1"
                  :inactive-value="0"
                  @change="setCourseSub($event, row)"
                  active-text="是"
                  inactive-text="否"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否私有" width="80">
        <template slot-scope="{ row }">
          <el-tag v-if="row.isprivate" effect="dark" type="warning"
          >私有
          </el-tag
          >
          <el-tag v-else type="success" effect="dark">公开</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="usercode" label="创建人" width="100" sortable/>
      <el-table-column label="操作" width="100">
        <template slot-scope="{ row }">
          <div>
            <el-button @click="hasEaPermission(row.usercode, 'edit', row)" type="text" size="small">
              编辑
            </el-button>
            <el-button @click="
            hasEaPermission(row.usercode,'delRow',`/sys/subject/deleteSubject/${row.subid}`, '科目')
            " type="text" size="small" class="danger">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </data-table>
    <ea-subject
        ref="eaDialog"
        @on-reload="dtb.loadData()"
        :show.sync="showEaDialog"
    ></ea-subject>
  </div>
</template>

<script>
import dtb from "@/mixins/refs/dtb";
import eaDialog from "@/mixins/refs/eaDialog";
import EaSubject from "./EaSubject";
import {mapGetters} from "vuex";
import deleteRow from "@/mixins/dataTable/deleteRow";
import tbSearch from "@/mixins/dataTable/tbSearch";
import permission from "@/mixins/permission/permission"

export default {
  name: "index",
  components: {EaSubject},
  mixins: [deleteRow, dtb, eaDialog, tbSearch, permission],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/subject/getSubjectList",
        data: {
          subname: "",
          quebankid: null,
          orderType: 1
        }
      },
      sortColumn: ["sort","createtime", "usercode"],
      queBanks: []
    };
  },
  created() {
    this.api.getUserQueBank.apply(this);
  },
  computed: {
    ...mapGetters(["getUserType", "getUserAccount"])
  },
  methods: {
    edit(row) {
      // if (row.usercode == 'admin') {
      //   this.$message({
      //     type: 'warning',
      //     message: '只能操作本人创建的信息!'
      //   })
      //   return false;
      // }
      this.showEaDialog = true;
      this.eaDialog.$data.type = "edit";
      this.$nextTick(() => {
        this.eaDialog.$data.singleData = this.deepClone(row);
      });
    },
    updateSubStatus(status, {subid}, type) {
      this.axios
          .post("/sys/subject/updateSubjectStatus", {
            status,
            subid,
            type
          })
          .then(res => {
            this.$notify.success("修改科目状态成功！");
          });
    },
    setCourseSub(status, { subid }) {
      this.axios
              .put(`/sys/subject/setCourseSub/${subid}/${status}`)
              .then(res => {
                this.$notify.success("更改科目属性成功！");
              });
    },
    updateSort(order,subid) {
      this.axios({
        method: "post",
        url: "/sys/subject/sort",
        data: {
          sort: parseInt(order),
          subid: subid
        }
      }).then(
        location.reload()
      );
    }
  }
};
</script>

<style scoped></style>
